<template>
  <transition name="notice">
    <div class="notice-wrapper" v-if="isShow">
      <div class="notice-content">
        <h5 class="header">{{title}}</h5>
        <div class="body">{{content}}</div>
      </div>
    </div>
  </transition>
</template>
 
<script>
export default {
  data() {
    return {
      isShow: false
    }
  },
 
  props: {
    title: {
      type: String,
      default: '提示'
    },
 
    content: {
      type: String,
      default: ''
    },
 
    duration: {
      type: Number,
      default: 3000
    }
  },
 
  mounted() {
    this.isShow = true
  },
 
  created() {
    if (this.duration === 0) return
 
    this.timer = setTimeout(() => {
      this.isShow = false
    }, this.duration)
  },
 
  methods: {
    hide() {
      this.isShow = false
    }
  }
}
</script>
 
<style scoped lang="scss">
.notice-wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: inherit;
 
  &::after {
    content: '';
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #eee;
    opacity: 0.1;
  }
 
  .notice-content {
    position: relative;
    box-sizing: border-box;
    width: 30%;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    background: #1989fa;
    color: #fff;
    box-shadow: 0px 0px 2px 2px #ccc;
    border-radius: 5px;
 
    .header {
      padding: 0 0 20px 0;
      margin: 0;
      font-size: 16px;
    }
  }
}
 
.notice-enter,
.notice-leave-to {
  opacity: 0;
}
 
.notice-enter-active,
.notice-leave-active {
  transition: opacity 0.5s;
}
</style>